<script setup lang="ts">
import { LanguageType } from '../../../enums/index'
import useLocaleStore from '../../../store/locale'

const list = ref([
  {
    label: '中文',
    value: LanguageType.ZH_CN,
  },
  {
    label: 'English',
    value: LanguageType.EN,
  },
  // {
  //   label: 'بالعربية',
  //   value: LanguageType.AR,
  // },
])

const localeStore = useLocaleStore()

function onChangeLanguage(language: LanguageType) {
  localeStore.setLanguage(language)

  const url = new URL(window.location.href)
  const params = new URLSearchParams(url.search)
  params.set('language', language)
  url.search = params.toString()

  window.location.href = url.href
}
</script>

<template>
  <ElDropdown
    style="color:inherit"
    @command="onChangeLanguage"
  >
    <span class="i-carbon-translate" />
    <template #dropdown>
      <ElDropdownMenu class="max-h-300px overflow-auto">
        <ElDropdownItem
          v-for="item in list"
          :key="item.value"
          :command="item.value"
          :class="{ 'language-item-active': item.value === localeStore.getLanguage }"
        >
          {{ item.label }}
        </ElDropdownItem>
      </ElDropdownMenu>
    </template>
  </ElDropdown>
</template>

<style lang="less" scoped>
:deep(.el-dropdown-menu__item.language-item-active) {
  color: var(--el-color-primary);
}
</style>
